@height: 100px;
@footerHeight: 0px;
@contentHeight: @height - @footerHeight;
.project-card {
  width: 356px;
  height: @height;
  border-radius: 8px;
  // padding: 8px 16px;
  background-color: var(--background-color-transparent);
  cursor: pointer;

  .content-wrapper {
    display: flex;
    .cover {
      display: flex;
      flex-basis: @contentHeight;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: @contentHeight;
      height: @contentHeight;
      overflow: hidden;
    }
    .content {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-around;
      height: @contentHeight;
      margin-left: 8px;

      .title {
        font-weight: 600;
        font-size: 16px;
        color: var(--text-color);
      }
      .desc {
        overflow: hidden;
        color: var(--text-color-2);
        font-size: 12px;
        font-size: 12px;
        text-overflow: ellipsis;
      }
      .time {
        font-size: 12px;
        color: var(--text-color-2);
      }
      .expired {
        font-size: 12px;
        color: var(--text-warning-color);
      }
    }
  }

  .divider {
    margin-top: 8px;
    margin-bottom: 0;
  }

  .footer {
    padding: 8px 0;
    justify-content: space-between;
    display: flex;
    .action {
      color: var(--text-color);
      height: 32px;
      line-height: 32px;
      margin-top: -4px;
      margin-bottom: 0;
      &:hover {
        color: var(--primary-color);
      }
    }
    .divider-vertical {
      height: 26px;
    }
  }

  .extra-top-right {
    position: absolute;
    right: 12px;
    top: 14px;
  }
}

.ant-radio-button-wrapper.gi-workspace-temp {
  width: 140px !important;
  height: 140px !important;
  margin: 8px !important;
  padding: 8px !important;
  text-align: center;
}
